<template>
	<view>
		<view class="member-top">
			<view class="avatar-box">
				<image class="avatar" :src="info.avatar"></image>
			</view>
			<view class="teacher-name">
				<view class="member-name">{{info.name}}</view>
				<view class="level">{{info.level}}</view>
			</view>
		</view>
		<view class="main-content">
			<view class="special">
				<view class="common-title">毕业学校</view>
				<view class="category-items">
					<view>{{info.school}}</view>
				</view>
			</view>
			<view class="teacher-info">
				<view class="">
					<view class="common-title">教学经历</view>
					<view>
						<rich-text :nodes="info.data.education"></rich-text>
					</view>
				</view>
				<view class=" mt40">
					<view class="common-title">教学特点</view>
					<view>
						<rich-text :nodes="info.data.feature"></rich-text>
					</view>
				</view>
			</view>
			<view class="intro">
				<view class="common-title">教师详情</view>
				<view class='content' v-if="info.data.detail">
					<jyf-parser class="product-detail" :html="info.data.detail | formatRichText" ref="article"></jyf-parser>
				</view>
			</view>
			
		</view>
		<view class="foot-content">
			<view class="call">TA的课程</view>
		</view>
		<view style="height: 100rpx;width: 100%;"></view> 
	</view>
</template>

<script>
	import vTabs from "@/components/v-tabs/v-tabs";
	import {
		Teacher
	} from '@/model/teacher.js';
	var teacher = new Teacher();
		import jyfParser from "@/components/jyf-parser/jyf-parser";
	const app = getApp();
	export default {
		comments: {
			vTabs
		},
		data() {
			return {
				id:'',
				tabs: ['介绍', '课程'],
				activeTab: 0,
				swiperCurrent: 0,
				info:{
					data:{}
				}
			}
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) { //控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						if (match.search(/style=/gi) == -1) {
							match = match.replace(/\<img/gi, '<img mode="widthFix" style=""');
						}
						return match;
					});
					newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; line-height:150%;');
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					return newContent;
				} else {
					return '暂无详情'
				}
			},
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail();
		},
		onShow: function() {

		},
		onPullDownRefresh() {

		},
		methods: {
			//详情
			getDetail:function(){
				var that = this;
				var param = {'id':this.id};
				teacher.view(param,(data) => {
					that.$data.info=data.data;
				});
			},
			changeTab: function(index) {
				this.swiperCurrent = index
			},
			animationFinished: function(e) {
				this.activeTab = e.detail.current
				this.swiperCurrent = e.detail.current
				// 填充数据
				//this.fillData()
			},
		},
	}
</script>

<style lang="scss">
	
	.member-top {
		background-image: url("../../static/member-bg.jpg");
		width: 100%;
		height: 340rpx;
		color: #fff;
	}

	.avatar-box {
		display: flex;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 40rpx;
		border: 2px solid #ececec;
	}

	.member-name {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		
	}
	.teacher-name{display: flex;justify-content: center;align-items: center;margin-top: 30rpx;}
	.level{color: #ff6600;margin-left: 40rpx;}
	.contact-me {
		width: 200rpx;
		margin: 0rpx auto;
		margin-top: 30rpx;
		text-align: center;
		background: linear-gradient(left, #faa63b, #febc1a);
		padding: 18rpx 0;
		border-radius: 30px;
		font-size: 30rpx;
	}

	.member-main {
		display: flex;
		margin-top: 40rpx;
	}

	.main-item {
		width: 300%;
		text-align: center;
	}

	.item-label {
		font-size: 28rpx;
	}

	.item-num {
		font-size: 34rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.special {
		margin-top: -30rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background-color: #fff;
		padding: 0 4%;
		padding-top: 30rpx;
	}

	.common-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	/*分类*/
	.category-items {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0%;
		width: 100%;
		margin-top: 30rpx;
	}

	.category-item {
		background-color: #f3f4f8;
		color: #666;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		width: 23%;
		margin-right: 2%;
		border-radius: 10rpx;
		text-align: center;
		padding: 20rpx 0;
	}
	.container-tabs__swiper{height: 400rpx;}
	.member-intro{padding: 30rpx  30rpx 0 30rpx;font-size: 30rpx;line-height: 44rpx;color: #444;}
	.case{margin-top: 40rpx;padding: 0 4%;}
	.cases{display: flex;flex-wrap: wrap;width: 100%;justify-content: space-between;}
	.case-item{width: 48%;}
	.case-item image{width: 100%;border-radius: 10rpx;}
	.case-name{font-size: 28rpx;line-height: 38rpx; color: #666;margin-top: 10rpx;}
	.foot-content{position: fixed;bottom: 0;background-color: #fff;z-index: 90;display: flex;justify-content: space-between;align-items: center; padding: 30rpx 4%;width: 100%;font-size: 28rpx;}
	.left{display: flex;align-items: center;}
	.member-avatar{width: 70rpx;height: 70rpx;border-radius: 50%;margin-right: 40rpx;}
	.foot-content .name{font-size: 30rpx;margin-bottom: 10rpx;font-weight: bold;}
	.foot-content .region{color: #777;}
	.call{
		display: inline-block;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		color: white;
		border-radius: 40rpx;
		margin-top: 10rpx;
		text-align: center;
		-webkit-box-shadow: 0 0 10px 4px #deeef9;
		box-shadow: 0 0 10px 4px #deeef9;
		background: -webkit-linear-gradient(left, #11c48e, #08c4a9);
		background: -o-linear-gradient(right, #11c48e, #08c4a9);
		background: -webkit-gradient(linear, left top, right top, from(#11c48e), to(#08c4a9));
		background: -o-linear-gradient(left, #11c48e, #08c4a9);
		background: linear-gradient(to right, #11c48e, #08c4a9);
	}
	.mt40{margin-top: 40rpx;}
	.teacher-info{background-color: #fff;padding: 40rpx  3% 0 3%;}
	.intro{padding: 40rpx 2% 0 2%;background-color: #fff;}
</style>
